<script>
import Health from "@/pages/goods/index-components/health.vue";
import Distribution from "@/pages/user/subsidy/distribution.vue";
import Pointlist from "@/pages/goods/pointlist.vue";

export default {
  name: "children",
  components: {Pointlist},
  data(){
    return{
      List:[]
    }
  },
  onShow(){
    this.getList()
  },
  methods:{
    goPage(){
      this.$Router.push({
        path: "/pages/goods/categorydetailmodel",
        query: { id: '1461' ,name: '孕婴童'}
      });
    },
    getList(){
      this.$http('goods.getCateGood',{
        cateId: 514,
        size: 4
      })
          .then(res=>{
            this.List = res.data.products
          })
    },
	toGoods(e){
		this.$Router.push({
		  path: '/pages/goods/detail',
		  query: {
		    id: e,
		  }
		})
	}
  }
}
</script>

<template>
  <view class="bigbox">
    <ljshop-back :class="{red : false}"></ljshop-back>
    <view class="content">
    </view>
    <view class="bodys">
      <view class="bigcard">
        <view class="card" v-for="item,index in List " :key="index" @click="toGoods(item.id)">
          <view class="imgbox">
            <image :src="item.img" mode="heightFix" ></image>
          </view>
          <view class="info">
            <view class="title">{{item.name}}</view>
          </view>
          <view class="onBuy">抢购价：
            <text style="color: #fdf298;font-size: 30rpx">{{item.price}}</text>
            元</view>
        </view>
      </view>
    </view>
    <view class="more">
      <view class="morebox" @click="goPage">查看更多</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.red{
  display: none;
}
.more{
  margin-top: 20rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  .morebox{
    padding: 10rpx;
    border-radius: 30rpx;
    width: 300rpx;
    text-align: center;
    color: #fff;
    background: #dd9dd0;
    margin-bottom: 50rpx;
    // 阴影
    box-shadow: 0 10rpx 10rpx #9e6592;
  }
}
.bigbox{
  background: #e9ade8;
}
.content{
  background: url("https://image.hzwltb69.com/app/date/2023/scyunyingtong001.png") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 760rpx;
}
.bodys{
  width: 100%;
  padding: 20rpx;
  height: 1000rpx;
  .bigcard{
    width: 100%;
    height: 100%;
    background: url("https://image.hzwltb69.com/app/date/2023/chilren02.jpg") no-repeat;
    background-size: 100%;
    border-radius: 20rpx;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: center;
    padding: 150rpx 20rpx 0 20rpx;
    .card{
      width: 300rpx;
      height: 330rpx;
      background: #fff;
      border-radius: 20rpx;
      margin-bottom: 50rpx;
      position: relative;
      .onBuy{
        position: absolute;
        bottom: -30rpx;
        width: 270rpx;
        text-align: center;
        // 居中
        left: 50%;
        transform: translateX(-50%);
        background: #dc9ecf;
        border-radius: 30rpx;
        padding: 10rpx 10rpx 10rpx 10rpx;
        font-size: 20rpx;
        color: #fff;
        // 底部黑色阴影
        box-shadow: 0 5rpx 5rpx #9e6592;
      }
      .imgbox{
        width: 100%;
        height: 220rpx;
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        padding: 0 20rpx 0 20rpx;
        color: #2147b6;
        font-weight: bold;
        font-size: 28rpx;
        width: 100%;
        height: 80rpx;
        // 两行溢出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>